<template>
  <div style="background: #eeeeee">
    <div style="width:100%;text-align: center">
      <img src="../../../assets/img/signin/login.png"/>
      <div>
        <div>
          <input v-model="email" type="email" class="input_style" placeholder="邮箱"/>
        </div>
        <div>
          <input v-model="passward" type="password" class="input_style" placeholder="请输入你的密码"/>
        </div>
        <div>
          <button class="button_style" @click="login(email,passward)">登录</button>
        </div>
        <div class="text_style">
          <span style="float: left">忘了密码？</span>
          <span style="float: right;" @click="$router.push('/signUp')">注册新帐号</span>
        </div>
      </div>
    </div>
    <my-toast v-model="showToast" :toast-msg="toastMsg" :toast-time="toastTime"></my-toast>
  </div>
</template>

<script>
  import md5 from 'js-md5';
  export default {
    name: "SignIn",
    data(){
      return {
        email:'',
        passward:'',
        showToast:false,
        toastMsg:'',
        toastTime:2000
      }
    },
    methods:{
      showMyToast(toastMsg,toastTime){
        this.toastMsg=toastMsg
        this.toastTime=toastTime
        this.showToast=true
      },
      /*
      * 登录时将token存放在cookie中
      * 每次请求时带上token头部
      * */
      login(email,passward){
        if(!email||!passward){
          this.showMyToast('邮箱和密码不能为空！',2000)
          return
        }
        let _this=this
        _this.$store.dispatch('loginByEmailAndPwd',{
          email:email,
          passward:md5(passward)
        }).then(res=>{
          if(res.resStatus==1){//登陸成功
            _this.$router.push("/index")
          }else{
            _this.showMyToast('登陸失败',2000)
            // this.$router.push("/requestErr")
          }
        }).catch(err=>{
          _this.$router.push("/requestErr")
        })
      }
    }
  }
</script>

<style scoped>
.input_style{
  width: 273px;
  outline-style: none ;
  border: 1px solid #ccc;
  border-radius: 3px;
  color: #333333;
  border: none;
  background: #ffffff;
  padding: 15px 5px;
  font-size: 16px;
  margin-top: 1px;
}
.button_style{
  width: 283px;
  height: 44px;
  line-height: 44px;
  background: #146fdf;
  border: none;
  border-radius: 4px;
  color: #fff;
  font-size: 16px;
  margin-top: 15px;
}
.text_style{
  width: 283px;
  color: #246183;
  margin: 15px auto;
  line-height: 14px;
  font-size: 14px;
  padding: 15px 10px;
}
</style>
